<!--  -->
<template>
  <div class="member">
    <div class="user-icon">
      <div class="left-icon">
        <img
          src="../assets/img/icon-message@2x.png"
          style="width: 26px; height: 26px"
          @click.stop="toMessageView"
        />
      </div>
      <div class="right-icon">
        <div class="user-setting">
          <img
            src="../assets/img/icon-setting@2x.png"
            style="width: 26px; height: 26px"
            @click.stop="toSettingView"
          />
        </div>
      </div>
    </div>
    <div class="user-info-box" @click.stop="toLogin">
      <div class="user-avatar-box">
        <img v-if="token" :src="myInfo.avatar" />
        <img v-else src="../assets/img/default_avatar.png" />
      </div>
      <div v-if="token" class="user-body">
        <div class="user-nickname">{{ myInfo.nick_name }}</div>
        <div class="role-name">{{ roleInfo.name }}</div>
      </div>
      <div v-else class="user-body"><div class="login-button">请登录</div></div>

      <div class="user-back">
        <img src="../assets/img/icon-prev.png" style="width: 12px; height: 12px" />
      </div>
    </div>
    <div class="vip-banner-box" @click.stop="toRoleView">
      <img src="../assets/img/VIPcenter@2x.png" />
    </div>
    <div class="user-banner-item">
      <div class="banner-title">我的账号</div>
      <div class="banner-body">
        <div class="grid-box">
          <div class="grid-item" @click="toOrderView">
            <div class="icon">
              <div class="icon-img"><img src="../assets/img/icon-list@2x.png" /></div>
            </div>
            <div class="name">我的订单</div>
          </div>
          <div class="grid-item" @click="toPromocodeView">
            <div class="icon">
              <div class="icon-img"><img src="../assets/img/icon-money@2x.png" /></div>
            </div>
            <div class="name">我的邀请</div>
          </div>
        </div>
      </div>
    </div>
    <TechSupport></TechSupport>
    <FooterNav type="member"></FooterNav>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TechSupport from "@/components/TechSupport.vue";
import FooterNav from "@/components/FooterNav.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    TechSupport,
    FooterNav,
  },
  data() {
    //这里存放数据
    return {
      token: "",
      myInfo: {},
      roleInfo: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toRoleView() {
      // let token = localStorage.getItem("myToken");
      // if (token) {
      //   this.$router.push({
      //     name: "Role",
      //   });
      // } else {
      //   this.$router.push({
      //     name: "login-password",
      //     query: {
      //       url: window.location.href,
      //     },
      //   });
      // }
      this.$router
        .push({
          name: "role",
        })
        .catch((err) => {});
    },
    toLogin() {
      // let token = localStorage.getItem("myToken");
      // if (token) {
      //   this.$router.push({
      //     name: "profile",
      //   });
      // }else {
      //   this.$router.push({
      //     name: "login-password",
      //     query: {
      //       url: window.location.href,
      //     },
      //   });
      // }
      // console.log(this.$route);
      this.$router
        .push({
          name: "profile",
        })
        .catch((err) => {});
    },
    toSettingView() {
      this.$router.push({
        name: "setting",
      });
    },
    toMessageView() {
      this.$router
        .push({
          name: "message",
        })
        .catch((err) => {});
    },
    toOrderView() {
      this.$router
        .push({
          name: "order",
        })
        .catch(() => {});
    },
    toPromocodeView() {
      this.$router
        .push({
          name: "promocode",
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    let token = localStorage.getItem("myToken");
    this.token = token;
    if (token) {
      let res = await this.$request
        .get("/api/v2/member/detail")
        .then((res) => {
          this.roleInfo = res.data.role;
          this.myInfo = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.member {
  margin-bottom: 53px;
  background: #f3f6f9;
  position: absolute;
  left: 0;
  top: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  .user-icon {
    width: 100%;
    background: #fff;
    height: auto;
    float: left;
    box-sizing: border-box;
    padding: 20px 15px 25px 15px;
    display: flex;
    justify-content: space-between;
    .left-icon {
      position: relative;
      width: 26px;
      height: 26px;
      img {
        width: 26px;
        height: 26px;
      }
    }

    .right-icon {
      flex: 1;
      display: flex;
      flex-direction: row-reverse;
      .user-setting {
        position: relative;
        width: 26px;
        height: 26px;
        img {
          width: 26px;
          height: 26px;
        }
      }
    }
  }
  .user-info-box {
    width: 100%;
    background: #fff;
    height: auto;
    float: left;
    box-sizing: border-box;
    padding: 0px 15px 30px 15px;
    // margin-top: 25px;
    display: flex;
    align-items: center;
    .user-avatar-box {
      width: auto;
      height: 64px;
      box-sizing: border-box;
      padding-right: 15px;
      img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
      }
    }

    .user-body {
      flex: 1;
      height: 64px;
      .login-button {
        width: 100%;
        height: auto;
        float: left;
        font-size: 16px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 64px;
      }
      .user-nickname {
        width: 100%;
        height: auto;
        float: left;
        box-sizing: border-box;
        padding-top: 10px;
        padding-bottom: 15px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 16px;
      }

      .role-name {
        width: 100%;
        height: auto;
        float: left;
        font-size: 13px;
        font-weight: 400;
        color: #666;
        line-height: 13px;
      }
    }

    .user-back {
      img {
      }
    }
  }
  .vip-banner-box {
    width: 100%;
    height: 60px;
    float: left;
    background: #fff;
    text-align: center;
    img {
      height: 60px;
    }
  }
  .user-banner-item {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px 15px;
    margin-bottom: 10px;
    .banner-title {
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 25px;
      font-size: 15px;
      font-weight: 600;
      color: #333;
      line-height: 15px;
    }

    .banner-body {
      width: 100%;
      height: auto;
      float: left;
      .grid-box {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        .grid-item {
          .icon {
            width: 100%;
            height: auto;
            float: left;
            margin-bottom: 10px;
            text-align: center;
            .icon-img {
              display: inline-block;
              img {
                width: 30px;
                height: 30px;
              }
            }
          }

          .name {
            width: 100%;
            height: auto;
            float: left;
            font-size: 12px;
            font-weight: 400;
            color: #333;
            line-height: 12px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
